<template>
        <Navbar/>
    <!-- 视频页面 -->
    <div class="video-content">
        <div id="dplayer" ref="player" class="dplayer"></div>
    </div>
    <div class="personal">
        <div class="personal_top">
            <p>{{video?.username}}</p>
            <el-button type="primary" size="default" @click="" round color="#f93684" >加入练习室</el-button>
        </div>
        <div class="personal_button">
            <p>{{video?.Subject}}</p>
            <p>{{video?.interests}}</p>
        </div>
    </div>
    <div class="button_contnet" >
        <el-button type="primary" size="default" @click="" round color="#ffeaf2" v-for="item in video?.button" :key="item">{{item}}</el-button>
    </div>
    <div class="guestbook">
        <div></div>
    </div>
    <Button />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "VideoList",
});
</script>

<script setup lang="ts">
    import {onMounted, ref } from "vue"
    import {reportDataApi} from "@/api/data/index"
    import {mockType} from "@/api/data/model/index"
    import Hls from 'hls.js'
    import DPlayer from 'dplayer'
    const dp = ref(null)
    const player = ref()
    const video = ref <mockType>()
    //回调函数
    const loadVideo = (videoInfo: any) => {
    dp.value = new DPlayer({
        element: player.value,
        video: {
             pic: "https://rs.dance365.com/photo/8fd34418-b22e-4e3f-b07d-2b8760f00b1a.jpg", // 封面
            url: videoInfo.video,
            type: 'customHls',
            customType: {
                customHls: function (video: any, player: any) {
                    const hls = new Hls()
                    hls.loadSource(video.src)
                    hls.attachMedia(video)
                }
            }
        }
    })
}
onMounted(()=>{

    getMockList()
})
//调用请求
const getMockList = async ()=>{
        const result = await reportDataApi()
        video.value= result
        loadVideo(result.pic)
}
</script>
<style lang="scss" scoped>
.video-content{
    background-color: #1e1e1e;
    height: 664px;
    .dplayer{
        width: 500px;    
        margin: 0 auto;
        height: 664px;
      }
}
.personal{
    background-color: #ffffff;
    width: 1060px;
    margin: 0 auto;
    .personal_top{
        margin-top: 10px;
        display:flex ;
        justify-content: space-between;
        p{
            color: #111;
            font-size: 20px;
        }
    }
    .personal_button{
        p{
            font-size: 15px;
            cursor: pointer;
            color: #f93684;
        }
    }
}
.button_contnet{
        background-color: #ffffff;
        width: 1060px;
        height: 60px;
        margin: 20px auto;
        display: flex;
        align-items: center;
}
</style>c